<template>
  <div>
    <div class="cover" v-if="isShow"></div>
    <transition @before-enter="handleBeforeEnter"
    @enter="handleEnter"
    >
      <slot></slot>
    </transition>
  </div>
</template>
<script>
/* 
.v-enter   @before-enter
.v-enter-active  @enter
.v-enter-to   @after-enter
 */
export default {
  data(){
    return {
      isShow:false
    }
  },
  methods:{
    handleBeforeEnter(){
      console.log(1);
      this.isShow = true;
    },
    handleEnter(){
      console.log(2)
      setTimeout(()=>{
        this.isShow = false;
      },200)
    }
  }
};
</script>
<style>
/* 从隐藏到显示 */
.v-enter-active{
    animation: animate  1s linear ;
}
@keyframes animate {
  0% {
    opacity: 0;
    transform: translateY(0);
  }
  50% {
    opacity: 0.5;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.cover{
    width:100%;
    height: 100%;
    background:#fff;
    position: fixed;
    z-index: 100;
}
</style>